//长视频管理

import React, { useEffect, useState, useCallback, useMemo } from 'react';
import Tbale from './content_components/Tbale';
import { get_contentmanagement } from '../../utils/api.tsx';
import { contentmange, contentmange_pay_id } from '../../utils/types/home.ts';
import moment from 'moment';
import type { TableProps } from 'antd';
import { Space, Tag } from 'antd';

import Gooutfile from '../../Compon/file/Gooutfile.jsx';
import UploadFile from '../../Compon/UploadFile.tsx';
import { change_contentmanagement } from '../../utils/api.tsx';
import { CompassOutlined } from '@ant-design/icons';
import ButtonCon from '../../Compon/ButtonCon.tsx';
import TopSearch from '../UserManagement/components/TopSearch.tsx';
import Websocket from '../../Compon/Websocket.tsx';
import Toptitle from '../../Compon/Toptitle.tsx';
export default function LongVideo(props) {
  const [contentmanagement, setContentmanagement] = useState<contentmange[]>(
    [],
  );
  interface employee {
    employee_name: string; //审核员名称
    employee_password: string; //审核员密码
    employee_time: number; //审核员注册时间
  }
  const [employee_video, setemployee_video] = useState<employee[]>([]);
  const get_contentmanagement_list = async () => {
    const res = await get_contentmanagement();
    setContentmanagement(res.data.data);
    setemployee_video(res.data.data2);
    console.log(res.data.data);
  };

  useEffect(() => {
    get_contentmanagement_list();
  }, []);
  const columns: TableProps<contentmange>['columns'] = [
    {
      title: '序号',
      dataIndex: '',
      key: '',
      render: (text, record, index) => {
        const a_index = 1;
        return <div>{index + 1}</div>;
      },
    },
    {
      title: 'ID',
      dataIndex: '_id',
      key: '_id',
      render: (text, record, index) => <div>{text}</div>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '封面',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return (
          <div>
            <img src={text.type_img} width={100} height={50} />
          </div>
        );
      },
    },
    {
      title: '视频',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return (
          <video src={text.video_url} width={100} height={50} controls></video>
        );
      },
    },
    {
      title: '标签',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return <div>{text.type_name}</div>;
      },
    },
    {
      title: '上传者',
      dataIndex: 'user_id',
      key: 'user_id',
      render: (text, record, index) => {
        return <div>{text.name}</div>;
      },
    },

    {
      title: '手机号',
      dataIndex: 'user_id',
      key: 'user_id',
      render: (text, record, index) => {
        return <div>{text.tel}</div>;
      },
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => {
        return (
          <Space>
            <Tag color={text == 1 ? 'green' : text == 2 ? 'red' : 'orange'}>
              {text == 1 ? '通过' : text == 2 ? '未通过' : '审核中'}
            </Tag>
          </Space>
        );
      },
      filters: [
        {
          text: '通过',
          value: 1,
        },
        {
          text: '未通过',
          value: 2,
        },
        {
          text: '审核中',
          value: 3,
        },
      ],
      filterSearch: true,
      onFilter: (value, record) => record.status === value,
    },
    {
      title: '审核管理员',
      dataIndex: 'status_user',
      key: 'status_user',
      render: (text, record, index) => {
        return <div>{text.employee_name}</div>;
      },
      filters: employee_video.map((item) => {
        return {
          text: item.employee_name,
          value: item.employee_name,
        };
      }),

      filterSearch: true,
      onFilter: (value, record) => record.status_user?.employee_name === value,
    },
    {
      title: '上传时间',
      dataIndex: 'video_path_time',
      key: 'video_path_time',
      render: (text, record, index) => {
        // 时间戳转化为时间
        return <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>;
      },
    },
    {
      title: '审核时间',
      dataIndex: 'status_time',
      key: 'status_time',
      render: (text, record, index) => {
        // 时间戳转化为时间
        return <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>;
      },
    },
    {
      title: '操作',
      dataIndex: '_id',
      key: '_id',
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <div>
            <ButtonCon
              name={'编辑'}
              title={'编辑'}
              content={
                longth_content.filter((item) => item._id == record._id)[0]
              }
              changecontent_list={changecontent_list}
            ></ButtonCon>
          </div>
        );
      },
    },
  ];

  const longth_content = useMemo(() => {
    return contentmanagement.filter((item) => item.shop_type.name == '长视频');
  }, [contentmanagement]);
  const changecontent_list = async (data: any) => {
    const res = await change_contentmanagement(data);

    get_contentmanagement_list();
  };

  return (
    <div>
      {/* <Websocket></Websocket> */}
      <div>
        <Toptitle title={'长视频管理'} />
        <TopSearch
          //下面是用户管理的
          // topName="普通用户管理"
          // phone="手机号"
          // username="用户名"
          // sex="性别"
          // vip="vip等级"
          // create_time="注册时间"
          // create="创建"
          // anchor="开播次数"
          // actor_name="演员名"
          // customerservice_name="客服名"
          // authentication_time="认证时间"
          button_one="查询"
          button_two="重置"
          // button_three="新增"
          //上面是用户管理的
          //下面是内容管理的
          // topName  = '内容管理'
          title="标题"
          uploader="上传者"
          audit_status="审核状态"
          sort="分类"
          // publish_time='发布时间'
          // examine_time='审核时间'
          //上面是内容管理的
          //下面是营销管理的
          // topName='营销管理'
          // advertisement='广告名称'
          // level='等级标题'
          // gift='礼物名称'
          //上面是营销管理的
          //下面是财务管理的
          // topName='财务管理'
          // trading_time='交易时间'
          //上面是财务管理的
          //下面是app管理的
          // topName='APP管理'
          // creation_time='创建时间'
          // owningpage='所属页面'
          // channel_name='频道名称'
          // tag_name='标签名'
          // sort_name='分类名'
          // report_time='举报时间'
          //上面是app管理的
          //下面是系统设置的
          // topName='系统设置'
          //上面全部都有了
          //上面是系统设置的
          //下面是系统管理的
          // topName="系统管理"
          // section_name="部门名"
          // superior_department="上级部门"
          // role_group="角色组"
        ></TopSearch>
        <Tbale data={longth_content} colums={columns}></Tbale>
        <div style={{ display: 'flex' }}>
          <UploadFile
            name={'导入'}
            url="http://localhost:3000/CustomerService/index/uploadFile"
          ></UploadFile>

          <Gooutfile data={longth_content}></Gooutfile>
        </div>
      </div>
    </div>
  );
}
